<template>
  <div>
    <display :card-show="false"
             h1content="Button 按钮" des-content="常用的操作按钮。"></display>
    <wsl-blank></wsl-blank>
    <display h2content="基础用法" des-content="基础的按钮用法。">
      <div slot="card">
        <wsl-button style="margin-right: 20px" v-for="(item,index) in buttonList" :key="'buttonList'+index"
                    :type="item.type">{{item.title}}</wsl-button>
        <br>
        <br>
        <wsl-button style="margin-right: 20px" v-for="(item,index) in buttonList" :key="'buttonList3'+index"
                    :type="item.type" round>{{item.title}}</wsl-button>
        <br>
        <br>
        <wsl-button style="margin-right: 20px" v-for="(item,index) in buttonList" :key="'buttonList4'+index"
                    :type="item.type" circle>
          <img slot="content" src="@/assets/icon/logo.png" alt="">
        </wsl-button>
      </div>
    </display>
    <wsl-blank></wsl-blank>
    <display h2content="禁用状态" des-content="按钮不可用状态。">
      <div slot="card">
        <wsl-button style="margin-right: 20px" v-for="(item,index) in disabledButtonList" :key="'disabledButtonList'+index"
                    :type="item.type" :disabled="item.disabled">
                    {{item.title}}</wsl-button>
      </div>
    </display>
    <wsl-blank></wsl-blank>
    <display h2content="图标按钮" des-content="带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。">
      <div slot="card">
        <wsl-button style="margin-right: 20px" v-for="(item,index) in buttonList" :key="'iconButton'+index"
                    :type="item.type">
          <img slot="content" src="@/assets/icon/logo.png" alt=""></wsl-button>
      </div>
    </display>
    <wsl-blank></wsl-blank>
    <display h2content="加载中" des-content="点击按钮后进行数据加载操作，在按钮上显示加载状态。">
      <div slot="card">
        <wsl-button loading></wsl-button>
      </div>
    </display>
    <wsl-blank></wsl-blank>
    <display h2content="不同尺寸" des-content="Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。">
      <div slot="card">
        <wsl-button style="margin-right: 20px" v-for="(item,index) in buttonSizeList" :key="'buttonSizeList'+index"
                    :size="item.size">
          {{item.title}}</wsl-button>
        <br>
        <br>
        <wsl-button style="margin-right: 20px" v-for="(item,index) in buttonSizeList" :key="'buttonSizeList2'+index"
                    :size="item.size" round>
          {{item.title}}
        </wsl-button>
      </div>
    </display>
  </div>
</template>

<script>
import {buttonList,disabledButtonList,buttonSizeList} from "@/data/home";
import Display from "@/components/display";
import WslButton from "@/components/basic/wsl-button/wsl-button";
import WslBlank from "@/components/others/blank";

export default {
  name: "index",
  components: {WslBlank, WslButton, Display},
  data(){
    return{
      true:true,
      false:false,
      buttonList, disabledButtonList,buttonSizeList,
    }
  }
}
</script>

<style scoped>
code{
  background-color: #FAFAFA;
}


</style>